import { useState,useEffect } from 'react'
import './App.css'
import { Routes,Route,Link } from 'react-router-dom'

// use开头  react hooks
// const Demo = () => {
//   useEffect(() => {
//     console.log('useeffrct 来了 老弟');
//     return () => {
//       console.log('useffect 走了 老弟');
//     }
//   })
//   return(
//     <div>
//       Demo
//     </div>
//   )
// }

const Index =() => {
  useEffect(() => {
    console.log(`useffect => 老弟，你来到 index页面`);
    return () => {
      console.log(`老弟，你离开了index页面`)
    }
  })
  return(
    <> 
    index
    </>
  )
}

const List =() => {
  return(
    <> 
    List
    </>
  )
}

function App() {
  const [count,setCount] = useState(0);
  const [isShow,setIsshow] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setIsshow(false)
    },1000)
  })
  useEffect(() => {
    console.log(`usereffect => you clicked ${count} times`);
    return ()=>{
      console.log('-----');
    }
  },[count])
  return (
    <div className="container">
      {/* { isShow && <Demo/>} */}
      <div>
        <p>You clicked {count} times</p>
        <button onClick={()=>setCount(count+1)}>click me</button>
      </div>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/list">列表</Link>
        </li>
      </ul>
      <Routes>
          <Route path="/" element={<Index/>}></Route>
          <Route path="/list" element={<List/>}></Route>
      </Routes>
    </div>
  )
}

export default App